import React from 'react';
import { Parallax } from 'rc-scroll-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { getChildrenToRender } from './utils';
import QueueAnim from 'rc-queue-anim';

type P = {
  id: string
}

class Content4 extends React.PureComponent<P> {
  constructor(prop: P) {
    super(prop)
  }
  render() {
    return (
      <OverPack id={this.props.id} playScale={0.3} className="container-fluid">

        <div className="row">
          <div className="col">
            <div className="container-xxl heada1">
              <div className="row">
                <div className="col heada1-h">
                  科学教育探索 — 培养体系不断完善
                </div>
              </div>
              <div className="row">
                <div className="col heada1-s">
                  Scientific Education Exploration-continuous Improvement Of The Training System
                </div>
              </div>
            </div>
          </div>
        </div>
        <QueueAnim
          type="bottom"
          key="block1"
          leaveReverse
          className="row"
        >

          <div key="a1" className="col-md-3 col-sm-6 c4-1 ">

            <div className="c4-1-1 c4-n-1">
              LEVEL 1
            </div>
            <div className="c4-1-2">
              6.5 - 9+
            </div>
            <div className="c4-1-3">
              <h4>一 ~ 三年级</h4>
              <p>
                通过Scratch学习编程，学生可以从简单的图形化编程语言入手，学会基本的编程知识和编程逻辑，与此同时，通过机器人套件及图形化编程实现更多人机交互及创意性的作品，激发孩子的创造力。
              </p>
            </div>
            <div className="c4-1-4">
              Scratch/机器人
            </div>
            <div className="c4-1-5">
              <img width="100%" src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/product_photo/PC0498231.png" alt="" />
            </div>
          </div>
          <div key="a2" className="col-md-3 col-sm-6 c4-1 ">

            <div className="c4-1-1 c4-n-2">
              LEVEL 1
            </div>
            <div className="c4-1-2">
              6.5 - 9+
            </div>
            <div className="c4-1-3">
              <h4>一 ~ 三年级</h4>
              <p>
                通过Scratch学习编程，学生可以从简单的图形化编程语言入手，学会基本的编程知识和编程逻辑，与此同时，通过机器人套件及图形化编程实现更多人机交互及创意性的作品，激发孩子的创造力。
              </p>
            </div>
            <div className="c4-1-4">
              Scratch/机器人
            </div>
            <div className="c4-1-5">
              <img width="100%" src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/product_photo/PC0498231.png" alt="" />
            </div>
          </div>
          <div key="a3" className="col-md-3 col-sm-6 c4-1 ">

            <div className="c4-1-1 c4-n-3">
              LEVEL 1
            </div>
            <div className="c4-1-2">
              6.5 - 9+
            </div>
            <div className="c4-1-3">
              <h4>一 ~ 三年级</h4>
              <p>
                通过Scratch学习编程，学生可以从简单的图形化编程语言入手，学会基本的编程知识和编程逻辑，与此同时，通过机器人套件及图形化编程实现更多人机交互及创意性的作品，激发孩子的创造力。
              </p>
            </div>
            <div className="c4-1-4">
              Scratch/机器人
            </div>
            <div className="c4-1-5">
              <img width="100%" src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/product_photo/PC0498231.png" alt="" />
            </div>
          </div>
          <div key="a4" className="col-md-3 col-sm-6 c4-1 ">
            <div className="c4-1-1 c4-n-4">
              LEVEL 1
            </div>
            <div className="c4-1-2">
              6.5 - 9+
            </div>
            <div className="c4-1-3">
              <h4>一 ~ 三年级</h4>
              <p>
                通过Scratch学习编程，学生可以从简单的图形化编程语言入手，学会基本的编程知识和编程逻辑，与此同时，通过机器人套件及图形化编程实现更多人机交互及创意性的作品，激发孩子的创造力。
              </p>
            </div>
            <div className="c4-1-4">
              Scratch/机器人
            </div>
            <div className="c4-1-5">
              <img width="100%" src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/product_photo/PC0498231.png" alt="" />
            </div>
          </div>
        </QueueAnim>
      </OverPack>
    );
  }
}

export default Content4;
